import 'package:eason_nebula/ui/Base/EasonBasePage.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/services.dart';

class StreamPage extends EasonBasePage {
  const StreamPage({Key? key}) : super(key: key);

  @override
  String get title => 'StreamPage';

  @override
  State<StreamPage> createState() => _StreamPageState();
}

class _StreamPageState extends BasePageState<StreamPage> {
  static const _batteryChannel = EventChannel('com.eason.nebula/batteryStream');
  static const _networkChannel = EventChannel('com.eason.nebula/networkStream');
  static const _volumeChannel = EventChannel('com.eason.nebula/volumeStream');

  String _batteryLevel = '未知';
  String _networkStatus = '未知';
  String _volume = '未知';

  double _batteryValue = 0.0;
  double _volumeValue = 0.0;

  StreamSubscription? _batterySub;
  StreamSubscription? _networkSub;
  StreamSubscription? _volumeSub;

  @override
  Widget buildContent(BuildContext context) {
    Color backgroundColor = Colors.grey.shade100;
    Color batteryGradientStart = Colors.blue.shade400;
    Color batteryGradientEnd = Colors.blue.shade900;
    Color volumeGradientStart = Colors.green.shade400;
    Color volumeGradientEnd = Colors.green.shade900;

    return Container(
      color: backgroundColor,
      padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            '设备信息监控',
            style: TextStyle(
              fontSize: 28,
              fontWeight: FontWeight.bold,
              color: Colors.blueGrey.shade900,
            ),
          ),
          const SizedBox(height: 24),

          // Battery Card
          Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
            ),
            elevation: 4,
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Row(
                children: [
                  Icon(Icons.battery_full, size: 48, color: batteryGradientEnd),
                  const SizedBox(width: 16),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '电池电量',
                          style: TextStyle(
                            fontSize: 20,
                            fontWeight: FontWeight.bold,
                            color: batteryGradientEnd,
                          ),
                        ),
                        const SizedBox(height: 8),
                        TweenAnimationBuilder<double>(
                          tween: Tween(begin: 0.0, end: _batteryValue),
                          duration: const Duration(milliseconds: 600),
                          builder: (context, value, _) {
                            int percentage = (value * 100).round();
                            return Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  '$percentage%',
                                  style: TextStyle(
                                    fontSize: 18,
                                    fontWeight: FontWeight.w600,
                                    color: batteryGradientEnd,
                                  ),
                                ),
                                const SizedBox(height: 6),
                                _buildGradientProgressBar(value, [
                                  batteryGradientStart,
                                  batteryGradientEnd,
                                ]),
                              ],
                            );
                          },
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),

          const SizedBox(height: 24),

          // Network Card
          Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
            ),
            elevation: 4,
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Row(
                children: [
                  Icon(
                    _networkStatus.toLowerCase().contains('wifi')
                        ? Icons.wifi
                        : Icons.signal_cellular_alt,
                    size: 48,
                    color: Colors.blue.shade700,
                  ),
                  const SizedBox(width: 16),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '网络状态',
                          style: TextStyle(
                            fontSize: 20,
                            fontWeight: FontWeight.bold,
                            color: Colors.blue.shade700,
                          ),
                        ),
                        const SizedBox(height: 8),
                        Row(
                          children: [
                            Icon(
                              _networkStatus.toLowerCase().contains('wifi')
                                  ? Icons.wifi
                                  : Icons.signal_cellular_alt,
                              color: Colors.blue.shade400,
                              size: 20,
                            ),
                            const SizedBox(width: 8),
                            Flexible(
                              child: Text(
                                _networkStatus,
                                style: TextStyle(
                                  fontSize: 18,
                                  fontWeight: FontWeight.w600,
                                  color: Colors.blue.shade600,
                                ),
                                overflow: TextOverflow.ellipsis,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),

          const SizedBox(height: 24),

          // Volume Card
          Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
            ),
            elevation: 4,
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Row(
                children: [
                  Icon(Icons.volume_up, size: 48, color: volumeGradientEnd),
                  const SizedBox(width: 16),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '系统音量',
                          style: TextStyle(
                            fontSize: 20,
                            fontWeight: FontWeight.bold,
                            color: volumeGradientEnd,
                          ),
                        ),
                        const SizedBox(height: 8),
                        TweenAnimationBuilder<double>(
                          tween: Tween(begin: 0.0, end: _volumeValue),
                          duration: const Duration(milliseconds: 600),
                          builder: (context, value, _) {
                            int volPercent = (value * 100).round();
                            return Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  '$volPercent%',
                                  style: TextStyle(
                                    fontSize: 18,
                                    fontWeight: FontWeight.w600,
                                    color: volumeGradientEnd,
                                  ),
                                ),
                                const SizedBox(height: 6),
                                _buildGradientProgressBar(value, [
                                  volumeGradientStart,
                                  volumeGradientEnd,
                                ]),
                              ],
                            );
                          },
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Widget _buildGradientProgressBar(double value, List<Color> colors) {
  return ClipRRect(
    borderRadius: BorderRadius.circular(8),
    child: Container(
      height: 12,
      decoration: BoxDecoration(
        color: Colors.grey.shade300,
        borderRadius: BorderRadius.circular(8),
      ),
      child: LayoutBuilder(
        builder: (context, constraints) {
          final width = constraints.maxWidth * value.clamp(0.0, 1.0);
          return Stack(
            children: [
              Container(
                width: width,
                decoration: BoxDecoration(
                  gradient: LinearGradient(colors: colors),
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
            ],
          );
        },
      ),
    ),
  );
}
